import { Meta } from "@storybook/blocks";

<Meta title="Patterns/Product Callouts/UserHasSeenAll" />

# UserHasSeenAll

The `UserHasSeenAll` component provides a context for the `<UserHasSeen>` componet to (optionally) register with, allowing us to render different things if there are items under this component that are determined to have been unseen.
This works by comparing a stored value of ids (using the user key value api) against the ids of `<UserHasSeen>` that are rendered as children.
This is most useful for being able to direct a users attention to something that is currently not being rendered on the screen (indicator dot on a menu trigger, for example)

# Docs

This component accepts the following props:

- `id: string` The id of the collection of items we are comparing with.
- `children: ({hasSeenAll: boolean, handleUpdate: () => void}) => JSX.Element` Function to render children that is passed a boolean value, as well as a function to update the values of seen keys to include all keys rendered as children

# Examples

```
<UserHasSeenAll id="collection-menu">
      {({ hasSeenAll, handleUpdate }) => (
        <Popover>
            <Popover.Target>
                <Button onClick={handleUpdate}>{hasSeenAll ? "nothing new here" : "new stuff inside"}</Button>
            </Popover.Target>
            <Popover.Dropdown>
                <UserHasSeen id="Foo">{() => Foo}</UserHasSeen>
                <UserHasSeen id="Bar">{() => Bar}</UserHasSeen>
            </Popover.Dropdown>
        </Popover>
      )}
</UserHasSeenAll>

```
